<template>
  <div class="px-2 py-2">
    <div class="flex items-start gap-10">
      <div class="w-1/3 flex items-center gap-3">
        <div class="text-sm">选择属性：</div>
        <div class="flex-1">
          <el-select
            v-model="selectFields"
            class="w-full"
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="2"
            multiple
            placeholder="请选择"
            @change="handleFieldChange"
          >
            <el-option
              v-for="(item, index) in qFieldList"
              :key="index"
              :label="item.comment"
              :value="item.name"
            />
          </el-select>
        </div>
      </div>
      <div class="flex-1 shadow-lg py-2 px-4">
        <div class="mb-4 flex justify-between px-4"
          ><span>查询条件</span>
          <el-icon title="清空" color="#f50303" :size="25" @click="handleDeleteAll"
            ><Delete /></el-icon
        ></div>
        <div>
          <div
            v-for="(item, index) in detailSearchs"
            :key="index"
            class="flex items-center gap-3 px-3 mb-3"
          >
            <div class="w-32 text-blue-600">
              <el-input v-model="item.field" readonly clearable />
            </div>
            <div class="w-48">
              <el-select
                v-model="item.oprType"
                placeholder="请选择"
                @change="(val) => handleTypeChange(val, item)"
              >
                <el-option
                  v-for="(selection, sindex) in selectionOption"
                  :key="sindex"
                  :label="selection.label"
                  :value="selection.value"
                />
              </el-select>
            </div>
            <div class="flex-1">
              <div v-if="item.oprType !== 'range'">
                <el-input
                  v-model="item.value"
                  :placeholder="item.oprType === 'in' ? '请用逗号“,”隔开' : ''"
                />
              </div>
              <div v-else-if="item.oprType === 'range'" class="flex items-center">
                <el-input v-model="item.value" />~
                <el-input v-model="item.value1" />
              </div>
            </div>
            <el-icon color="#666" :size="25" @click="handleDeleteItem(item)"><Delete /></el-icon>
          </div>
        </div>
        <div class="mt-6 flex justify-center pr-32">
          <el-button size="small" type="primary" :style="{}" @click="handleSure">确定</el-button>
          <el-button size="small" :style="{}" @click="restQury">重置条件</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, computed } from 'vue';

  const props = defineProps({
    queryField: {
      type: Array,
      default: () => [],
    },
    fieldList: {
      type: Array,
      default: () => [],
    },
    queryParams: {
      type: Array,
      default: () => [],
    },
  });
  const emits = defineEmits(['update:queryField', 'search']);

  const selectionOption = ref([
    { label: '等于', value: 'eq', prop: 'singleValue' },
    { label: '不等于', value: 'ne', prop: 'singleValue' },
    { label: '大于', value: 'gt', prop: 'singleValue' },
    { label: '大于等于', value: 'gte', prop: 'singleValue' },
    { label: '小于', value: 'lt', prop: 'singleValue' },
    { label: '小于等于', value: 'lte', prop: 'singleValue' },
    { label: '模糊匹配', value: 'like', prop: 'singleValue' },
    { label: '多选', value: 'in', prop: 'listValue' },
    { label: '范围', value: 'range', prop: 'rangeValue' },
  ]);

  const selectFields = computed({
    get() {
      return props.queryField;
    },
    set(val) {
      emits('update:queryField', val);
    },
  });
  const qFieldList = computed(() => props.fieldList);

  const detailSearchs = ref([]);

  function restQury() {
    detailSearchs.value.forEach((item) => {
      item.value = null;
      if ('value1' in item) {
        item.value1 = null;
      }
    });
  }

  function handleTypeChange(val, item) {
    const fitem = selectionOption.value.find((k) => k.value === val);
    console.log({ val, item });
    item.prop = fitem.prop;
    console.log({ val, item });
  }
  function handleFieldChange(val) {
    val.forEach((item) => {
      const hasItem = detailSearchs.value.some((info) => info.field === item);
      if (!hasItem) {
        detailSearchs.value.push({ field: item, value: null, oprType: null });
      }
    });
    detailSearchs.value = detailSearchs.value.filter((item) => val.includes(item.field));
  }

  function handleDeleteAll() {
    detailSearchs.value = [];
    selectFields.value = [];
  }
  function handleDeleteItem(row) {
    detailSearchs.value = detailSearchs.value.filter((item) => item.field !== row.field);
    selectFields.value = selectFields.value.filter((item) => item !== row.field);
  }
  function handleSure() {
    console.log({ detailSearchs: detailSearchs.value });
    const results = detailSearchs.value.map((item) => {
      const obj = {
        field: item.field,
        oprType: item.oprType,
        // singleValue: item.prop === 'singleValue' ? item.value : '',
        // listValue: item.prop === 'listValue' ? item.value?.split(',') || [] : [],
        // rangeValue:
        //   item.prop === 'rangeValue'
        //     ? {
        //         from: item.value,
        //         to: item.value1,
        //       }
        //     : {},
      };
      if (item.prop === 'singleValue') {
        obj.singleValue = item.value;
      } else if (item.prop === 'listValue') {
        obj.listValue = item.value?.split(',') || [];
      } else if (item.prop === 'rangeValue') {
        obj.rangeValue = {
          from: item.value,
          to: item.value1,
        };
      }
      return obj;
    });
    emits('search', { formConditionList: results });
  }
</script>
<style lang="scss" scoped></style>
